<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Redstone红石，前端UI框架</title>
    <meta content="" name="Description">
    <meta content="" name="Keywords">
    <meta charset="UTF-8">
    <!--坑爹的IE兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--坑爹的将360默认为极速模式打开-->
    <meta name="renderer" content="webkit">
    <!--移动优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--<link href="../less/flexible-layout.less" rel="stylesheet/less" type="text/css">-->
    <link href="../less/flex.css" rel="stylesheet" type="text/css">
    <style>
        .box-row,.box-col,.box-row-rev,.box-col-rev{
            border-radius: 5px;
            background-color: #e8e8e8;
            width: 400px;
            height: 160px;


        }
        .box-row div,.box-col div,.box-row-rev div,.box-col-rev div{
            border-radius: 5px;
            border-color: #959595;
            border-width: 1px;
            box-sizing: border-box;
            border-style: solid;
            background-color: #c4c4c4;
            padding:5px;
            margin:5px;
            color: #000000

        }
        .xs{width: 30px;height: 30px}
        .sm{width: 50px;height: 50px}
        .md{width: 70px;height: 70px}
        .lg{width: 90px;height: 90px}

        .xs{padding: 30px;}
        .sm{padding: 50px;}
        .md{padding: 70px;}
        .lg{padding: 90px;}
    </style>
</head>
<body>
flexbox布局框架，兼容IE10以上浏览器，自带响应式

<h1 class="p1">排列方向</h1>
<div class="p1">横向排列</div>
<div class="box-row">
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>横向反转</div>
<div class="box-row-rev">
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>竖向排列</div>
<div class="box-col">
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>竖向反转</div>
<div class="box-col-rev">
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<h1>行对齐方式</h1>
<div>行对齐方式-靠顶部对齐</div>
<div class="box-row row-top warp" >
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>行对齐方式-靠中间对齐</div>
<div class="box-row row-center warp" >
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>行对齐方式-靠底部对齐</div>
<div class="box-row row-bottom warp" >
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>行对齐方式-以两头为基准均匀分布</div>
<div class="box-row row-ends warp" >
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>行对齐方式-均匀分布</div>
<div class="box-row row-aver warp" >
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>行对齐方式-每一行高度一致</div>
<div class="box-row row-same warp" >
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<h1>水平对齐方式</h1>
<div>以头为基准靠齐</div>
<div class="box-row hor-first" >
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>以最后一个为基准靠齐</div>
<div class="box-row hor-last" >
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>以中间为基准靠齐</div>
<div class="box-row hor-center" >
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>已两头为基准均匀分布</div>
<div class="box-row hor-ends" >
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>均匀分布</div>
<div class="box-row hor-aver" >
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<h1>垂直对齐方式</h1>
<div>顶部对齐</div>
<div class="box-row ver-top" >
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>底部对齐</div>
<div class="box-row ver-bottom" >
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>居中对齐</div>
<div class="box-row ver-center" >
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>基准线对齐</div>
<div class="box-row ver-baseline" >
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>
<div>强制高度相等</div>
<div class="box-row ver-same" >
    <div>1,</div>
    <div class="xs">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>
</div>

<h1>个性对齐方式</h1>
<div class="box-row ver-top" >
    <div class="change-auto">1,</div>
    <div class="xs change-baseline">2,xs</div>
    <div class="sm change-bottom">3,sm</div>
    <div class="md change-center">4,md</div>
    <div class="lg change-stretch">5,lg</div>
    <div>1,</div>
    <div class="xs change-top">2,xs</div>
    <div class="sm">3,sm</div>
    <div class="md">4,md</div>
    <div class="lg">5,lg</div>

</div>




<script src="../js/avalon.js"></script>
<!-- set options before less.js script -->
<script>
    less = {
        //运行环境，如果是production，你的css文件将被缓存到本地并且信息不会输出到控制台。如果url以file://开头或者在你本地或者没有标准的端口，这都将被认为是development模式。
        env: "development",

        async: false,        //是否异步加载重要文件
        fileAsync: false,//当以file协议访问页面，是否异步引入文件
        poll: 1000,//在观察模式下，测试的时间。
        functions: {},//用户自定义函数

        //如果设置了，这增加了源代码行信息输出的CSS文件。这有助于您调试，分析其中一个特定的规则是从哪里来的。
        //comments 选项用于输出user-understandable内容,
        //mediaquery 选项用于使用火狐插件解析css文件信息.
        dumpLineNumbers: "comments",

        relativeUrls: false,//使用相对路劲。如果设置FALSE，则url是相对根目录文件
        rootpath: ":localhost/Redstone",//设置根目录，所有的Less文件都会以这个目录开始。
        errorReporting: "console"//设置编译失败时错误报告的方法。Options: html|console|function
    };
</script>
<script src="../js/less-1.7.0.js"></script>
</body>
</html>